<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :bottom="scrollBottom" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<view class="moment-show">
				<view class="moment-card-head">
					<view class="face">
						<u-image :fade="false" width="75" height="75" border-radius="8" :src="publisher.avatar" mode="aspectFill"></u-image>
						<image v-if="publisher.is_vip" class="vip-sign" :src="publisher.vip_file"></image>
					</view>
					<view class="right">
						<view class="first">
							<view class="name">{{ publisher.nickName }}</view>
							<image class="identity-sign" v-if="publisher.login_identity == 20" src="@/static/images/matchmaker/icon-sign.png" mode="aspectFit"></image>
							<sex-age-symbol v-if="publisher.login_identity != 20" :isMine="false" :sex="publisher.gender" :age="publisher.birth_age"></sex-age-symbol>
						</view>
						<view class="time">{{ createDateString }}</view>
					</view>
				</view>
				<view class="moment-card-content">{{ detail.content }}</view>
				<moment-media :fileList="files"></moment-media>
				<view class="moment-card-foot">
					<view class="address">{{ detail.address_brief || detail.address }}</view>
				</view>
				<view class="moment-card-tools">
					<view class="moment-card-tools-item" :class="{ activity: isFavor }">
						<view class="icon" @tap.stop="doFavor"><text class="suifont sui-zan"></text></view>
						<view class="text">赞 {{ favorCountString }}</view>
					</view>
				</view>
				<view class="favor-chunk" v-show="favorList.length > 0 && favorShow">
					<view class="favor-chunk-icon suifont sui-xinaixin"></view>
					<view class="favor-chunk-list">
						<view class="favor-chunk-item" v-for="favor in favorList" :key="favor.favor_id"><image mode="aspectFill" :src="favor.avatar"></image></view>
						<view class="favor-chunk-item" v-if="favorOverflow > 0">
							<view class="favor-chunk-more">{{ favorOverflow > 999 ? '···' : '+' + favorOverflow }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="comment-body">
				<view class="comment-item" v-for="(comment, index) in commentList" :key="comment.comment_id">
					<view class="comment-face"><image mode="aspectFill" border-radius="80" :src="comment.avatar" width="80" height="80"></image></view>
					<view class="comment-text">
						<view class="comment-main">
							<view class="comment-name">{{ comment.nickName }}</view>
							<view class="comment-action" @tap.stop="toComment(index)" :data-index="index">回复</view>
						</view>
						<view class="comment-other">{{ comment.createDateString }}</view>
						<view class="comment-content">
							<text class="comment-target" v-if="comment.to_comment_id > 0">{{ comment.to_nickName }}</text>
							{{ comment.content }}
						</view>
						<!-- <view class="comment-bottom">
						<view class="comment-bottom-item">···</view>
						<view class="comment-bottom-item">{{ comment.createDateString }}</view>
						<view class="comment-bottom-item">回复</view>
					</view> -->
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="footer-comment">
			<view class="footer-comment-mask" v-if="commentShow" @tap.stop="commentShow = false"></view>
			<block v-if="!commentShow && !commentText">
				<view class="footer-comment-back" @tap.stop="back"><u-icon name="arrow-left" color="#d8d8d8" size="38"></u-icon></view>
				<view class="footer-comment-placeholder" @tap.stop="commentShow = true">走心评论， 说点好听的~</view>
				<view class="footer-comment-direction " :class="{ checked: favorShow }" @tap.stop="favorShow = !favorShow">赞</view>
				<view class="footer-comment-direction"><text class="suifont sui-xiangshang" @tap.stop="scrollToTop"></text></view>
				<view class="footer-comment-direction"><text class="suifont sui-xiangxia" @tap.stop="scrollToBottom"></text></view>
			</block>
			<view class="footer-comment-chunk" v-else @touchmove.stop="stopTouchMove">
				<view class="footer-comment-to" v-if="commentTarget.comment_id > 0">
					回复 {{ commentTarget.target_name }} ：
					<view class="footer-comment-to-clear"><u-icon top="-2" color="#bfbfc1" size="26" name="close-circle-fill" @click="clearCommentTarget"></u-icon></view>
				</view>
				<view class="footer-comment-to" v-else>回复 楼主：</view>
				<textarea @blur="blurTextarea" v-model="commentText" :maxlength="textMaxLength" :auto-height="true" :auto-focus="commentShow" placeholder="走心评论， 说点好听的~" placeholder-class="placeholder" class="footer-comment-textarea"></textarea>
				<view class="footer-comment-expand">
					<view class="footer-comment-expand-left"></view>
					<view class="footer-comment-expand-right">{{ commentText.length }}/{{ textMaxLength }}</view>
				</view>
				<view class="footer-comment-tools">
					<view
						class="footer-comment-tools-btn"
						@tap="
							commentShow = false;
							commentText = '';
						"
					>
						取消
					</view>
					<view class="footer-comment-tools-btn important" @tap.stop="doComment">发布</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import moment from '@/utils/Moment.js';
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
import momentMedia from '@/components/custom/moment-media.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import ShareMixin from '@/mixins/share-mixins.js';
import ComplaintTypeEnum from '@/utils/enum/ComplaintType.js';
import ShareTypeEnum from '@/utils/enum/ShareType.js';
export default {
	components: { sexAgeSymbol, momentMedia },
	mixins: [MescrollMixin, ShareMixin],
	data() {
		return {
			moment_id: null,
			detail: {},
			files: [],
			favorList: [],
			favorCount: 0,
			publisher: {},
			createDateString: '',
			toolsPopupStatus: false,
			isFavor: false,

			commentCount: 0,
			commentList: [],
			singleImageStyle: {},
			commentText: '',
			favorShow: true,
			commentShow: false,
			textMaxLength: 250,
			commentTarget: {
				comment_id: 0,
				target_name: '楼主'
			},
			upOption: {
				toTop: { src: '' },
				textNoMore: '没有更多了，刷新看看'
			},
			downOption: {
				bgColor: '#fff'
			},
			canFavor: false,
			noramlActionList: [],
			shareParam: {
				object_type: ShareTypeEnum.MOMENT.value,
				object_id: null,
				object_path: '',
				object_query: ''
			},
			autoAction: null,

			// #ifdef APP-PLUS
			actionList: []
			// #endif
		};
	},
	computed: {
		favorOverflow: function() {
			return this.favorCount - this.favorList.length;
		},
		favorCountString: function() {
			if (this.favorCount < 1000) {
				return this.favorCount;
			} else if (this.favorCount < 100000) {
				return (this.favorCount / 1000).toFixed(2) + 'k';
			} else if (this.favorCount < 10000000) {
				return (this.favorCount / 10000).toFixed(2) + 'w';
			} else {
				return '999.99w+';
			}
		},
		scrollBottom: function() {
			if (this.commentShow) {
				return '266rpx';
			} else {
				return '100rpx';
			}
		}
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			// #ifdef APP-PLUS
			this.appSharePopup.show();
			// #endif
			// #ifdef H5
			uni.showActionSheet({
				itemList: this.noramlActionList,
				success: res => {
					this.onActionMore(res.tapIndex);
				}
			});
			// #endif
		}
	},
	onLoad(options) {
		const pages = getCurrentPages();
		this.moment_id = options.moment_id;
		setTimeout(() => {
			this.commentShow = options.action == 'comment';
		}, 300);
		this.$set(this.shareParam, 'object_id', options.moment_id);
		this.$set(this.shareParam, 'object_path', pages[pages.length - 1].route);
		this.$set(this.shareParam, 'object_query', this.$u.queryParams(options, false));

		this.getDetailData();
		this.getMomentFavorList();
	},
	onShow() {
		this.initShareMessage();
	},
	methods: {
		back() {
			this.navigateBack();
		},
		upCallback(mescroll) {
			this.$u.api
				.getMomentCommentList(this.moment_id, mescroll.num)
				.then(res => {
					const data = res.data.list;
					let list = data.data;
					list.map(item => {
						item.createDateString = this.calcDateDiff(item.create_time);
						return item;
					});
					if (mescroll.num == 1) {
						this.commentList = list;
					} else {
						this.commentList.push(...list);
					}
					this.mescroll.endBySize(list.length, data.total);
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		},
		toComment(index) {
			if (index == -99) {
				this.clearCommentTarget();
			} else {
				this.commentTarget = {
					comment_id: this.commentList[index].comment_id,
					target_name: this.commentList[index].nickName
				};
			}

			this.commentShow = true;
			this.toolsPopupStatus = false;
		},
		clearCommentTarget() {
			this.commentTarget = {
				comment_id: 0,
				target_name: '楼主'
			};
		},
		doComment() {
			this.$u.api.doCommentToMoment(this.moment_id, this.commentText, this.commentTarget.comment_id).then(res => {
				this.commentText = '';
				this.mescroll.resetUpScroll(false);
			});
		},
		calcDateDiff(time) {
			const createTimeMoment = moment(time, 'YYYY-MM-DD HH:mm:ss');
			const todayMoment = moment();
			const createTimeValueOf = createTimeMoment.valueOf();
			const diffDays = todayMoment.diff(createTimeMoment, 'days');
			const diffHours = todayMoment.diff(createTimeMoment, 'hours');
			// console.log(createTimeMoment.format('YYYY年MM月DD日'))
			if (diffDays < 3) {
				return createTimeMoment.fromNow();
			} else if (createTimeMoment.year() == todayMoment.year()) {
				return createTimeMoment.format('MM月DD日');
			} else {
				return createTimeMoment.format('YYYY年MM月DD日');
			}
		},
		blurTextarea() {
			setTimeout(() => {
				this.commentShow = false;
			}, 100);
		},
		onToggleToolsPopup() {
			this.toolsPopupStatus = !this.toolsPopupStatus;
		},
		getMomentFavorList() {
			this.$u.api.getMomentFavorList(this.moment_id).then(res => {
				const data = res.data.list;
				this.favorCount = data.total;
				this.favorList = data.data;
				this.canFavor = true;
			});
		},
		getDetailData() {
			this.$u.api.getMomentDetail(this.moment_id).then(res => {
				const info = res.data.info;
				this.detail = info;
				this.files = info.file;
				this.publisher = info.publisher;
				this.createDateString = this.calcDateDiff(info.create_time);
				this.isFavor = info.is_favor;
				uni.setNavigationBarTitle({
					title: `${this.publisher.nickName}的动态`
				});

				// #ifdef APP-PLUS
				const actionList = [
					{
						icon: '/static/images/action/icon-action-report.png',
						text: '举报',
						index: 0
					}
				];
				if (this.publisher.user_id == this.userInfo.user_id) {
					actionList.push({
						icon: '/static/images/action/icon-action-delete.png',
						text: '删除',
						index: 1
					});
				}
				this.actionList = actionList;
				this.initAppSharePopop();
				// #endif
				// #ifdef H5
				const noramlActionList = ['举报'];
				if (this.publisher.user_id == this.userInfo.user_id) {
					noramlActionList.push('删除');
				}
				this.noramlActionList = noramlActionList;
				// #endif
			});
		},
		scrollToTop() {
			this.mescroll.scrollTo(0, 100);
		},
		scrollToBottom() {
			this.mescroll.scrollTo(this.mescroll.getBodyHeight(), 100);
		},
		previewPhoto(e) {
			uni.previewImage({
				current: e.currentTarget.dataset.index,
				urls: this.photoList,
				indicator: 'number',
				loop: true
			});
		},
		doFavor() {
			if (this.canFavor) {
				this.toolsPopupStatus = false;
				this.canFavor = false;
				this.isFavor = !this.isFavor;
				this.$u.api
					.doFavorToMoment(this.moment_id)
					.then(res => {
						this.getMomentFavorList();
					})
					.catch(e => {
						this.isFavor = !this.isFavor;
						this.canFavor = true;
						this.favorCount -= 1;
					});
			}
		},
		stopTouchMove() {
			return;
		},

		onClickActionItem(index, data) {
			console.log(index);
			if (index == 0) {
				uni.navigateTo({
					url: '/pageSupport/supplement/report?type=' + ComplaintTypeEnum.MOMENT.value + '&id=' + this.moment_id
				});
			} else {
				uni.showModal({
					title: '',
					content: '删除后将无法恢复该动态！',
					confirmText: '删除',
					success: e => {
						this.$u.api.delMoment(this.moment_id).then(res => {
							this.navigateBack();
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.footer-comment {
	min-height: 100rpx;
	width: 750rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1rpx solid #efefef;
	.footer-comment-mask {
		background-color: rgba($color: #ffffff, $alpha: 0);
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.footer-comment-chunk {
		color: #333333;
		z-index: 20;
		.footer-comment-to {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			padding: 0 25rpx;
			display: flex;
			align-items: center;
			z-index: 20;
			.footer-comment-to-clear {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.footer-comment-textarea {
			width: 680rpx;
			padding: 15rpx 10rpx;
			line-height: 40rpx;
			min-height: 80rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			font-size: 26rpx;
			max-height: 250rpx;
			margin: 0 20rpx;
			&.placeholder {
			}
		}
		.footer-comment-expand {
			height: 77rpx;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 22rpx;
			color: #aeaeae;
			.footer-comment-expand-right {
			}
		}
		.footer-comment-tools {
			display: flex;
			padding-left: 10rpx;
			height: 100rpx;
			justify-content: flex-end;
			align-items: center;
			background-color: #f5f5f5;
			padding: 0 25rpx;
			.footer-comment-tools-btn {
				height: 50rpx;
				width: 105rpx;
				border-radius: 10rpx;
				border: 1rpx solid #e5e5e5;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				margin-left: 15rpx;
				&.important {
					background-color: $theme-main-color;
					border-width: 0;
					color: #fff;
				}
			}
		}
	}
	.footer-comment-back {
		width: 60rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		flex-shrink: 0;
		z-index: 20;
	}
	.footer-comment-placeholder {
		flex: 1;
		background-color: #f5f5f5;
		font-size: 22rpx;
		color: #bfbfc1;
		height: 70rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		z-index: 20;
	}
	.footer-comment-direction {
		width: 80rpx;
		height: 70rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #e5e5e5;
		flex-shrink: 0;
		z-index: 20;
		&.checked {
			color: #999999;
		}
	}
	.footer-comment-btn {
		height: 70rpx;
		width: 122rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $theme-main-color;
		font-size: 28rpx;
		z-index: 20;
	}
}
.footer-comment-textarea-placeholder {
	font-weight: 400;
	color: rgba(206, 206, 206, 1);
}

.moment-show {
	background-color: #fff;
	padding: 0 25rpx 15rpx;
}
.moment-card-head {
	height: 75rpx;
	display: flex;
	position: relative;
	.face {
		width: 75rpx;
		border-radius: 75rpx;
		height: 75rpx;
		position: relative;
		.vip-sign {
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			bottom: -6rpx;
			right: -10rpx;
		}
	}
	.right {
		height: 88rpx;
		padding: 0 30rpx 0 25rpx;
		.first {
			height: 40rpx;
			align-items: center;
			display: flex;
			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				margin-right: 5rpx;
			}
			.identity-sign {
				height: 32rpx;
				width: 80rpx;
				margin-right: 10rpx;
			}
		}
		.time {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}
}
.moment-card-content {
	margin-top: 28rpx;
	font-weight: 400;
	position: relative;
	font-size: 30rpx;
	color: #333;
	line-height: 1.8;
	text-align: left;
}
.moment-card-media {
	margin-top: 18rpx;
	display: flex;
	flex-wrap: wrap;
	.photo {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		&:nth-child(-n + 3) {
			margin-top: 0;
		}
		&.single {
			width: 400rpx;
			height: auto;
		}
		.photo-image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.video {
		video {
			width: 300rpx;
			height: 200rpx;
		}
	}
	.audio {
		.audio-player {
			min-width: 150rpx;
			height: 70rpx;
			background: rgba(251, 122, 142, 1);
			border-radius: 10rpx;
			position: relative;
			margin-left: 8rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			&::before {
				content: '';
				width: 0;
				height: 0;
				border-top: 20rpx solid rgba(251, 122, 142, 1);
				border-left: 20rpx solid transparent;
				position: absolute;
				left: -8rpx;
				top: 24rpx;
				transform: rotate(-135deg);
			}
			.audio-player-icon {
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
			.audio-player-text {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 40rpx;
				&::after {
					content: "''";
					font-style: italic;
					padding-left: 3rpx;
				}
			}
		}
	}
}
.moment-card-foot {
	margin-top: 15rpx;
	height: 70rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.address {
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(151, 151, 151, 1);
		padding: 6rpx 22rpx;
		background-color: #f8f8f8;
		border-radius: 30rpx;
	}
	.tools {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 70rpx;
		position: relative;
	}
}

.moment-card-tools {
	height: 120rpx;
	display: flex;
	margin-top: 30rpx;
	justify-content: center;
	.moment-card-tools-item {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		&.activity {
			.icon {
				background-color: $theme-main-color;
				text {
					color: #fff;
				}
			}
		}
		.icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #e5e5e5;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: background-color 0.2s ease-in;
			text {
				font-size: 35rpx;
				color: #cccccc;
				transition: color 0.2s ease-in;
			}
		}
		.text {
			height: 30rpx;
			line-height: 30rpx;
			font-size: 24rpx;
		}
	}
}
.favor-chunk {
	margin-top: 30rpx;
	padding: 20rpx 50rpx 10rpx 70rpx;
	background-color: #f2f2f4;
	position: relative;
	border-radius: 10rpx;
	&::before {
		content: '';
		width: 20rpx;
		height: 20rpx;
		background-color: #f2f2f4;
		position: absolute;
		transform: rotate(45deg);
		top: -10rpx;
		left: 50%;
		transform: translateX(-0.5);
		display: block;
	}
	.favor-chunk-icon {
		position: absolute;
		font-size: 24rpx;
		top: 43rpx;
		left: 23rpx;
		color: $theme-main-color;
	}
	.favor-chunk-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.favor-chunk-item {
			position: relative;
			flex-shrink: 0;
			width: 70rpx;
			height: 70rpx;
			background-color: #fff;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 8rpx;
			}
			.favor-chunk-more {
				display: flex;
				position: absolute;
				justify-content: center;
				align-items: center;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba($color: #000000, $alpha: 0.5);
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
}
.comment-body {
	margin-top: 8rpx;
	.comment-item {
		padding: 20rpx;
		display: flex;
		background-color: #fff;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			height: 1rpx;
			bottom: 0;
			background: #eaeaea;
		}
		.comment-face {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			overflow: hidden;
			flex-shrink: 0;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}
		.comment-text {
			margin-left: 20rpx;
			flex: 1;
			color: #333333;
			.comment-main {
				height: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.comment-name {
					line-height: 35rpx;
					font-size: 28rpx;
				}
				.comment-action {
					color: #bdc0c0;
					font-size: 24rpx;
				}
			}

			.comment-other {
				height: 40rpx;
				color: #c8c8c8;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
			.comment-content {
				font-size: 26rpx;
				color: #111111;
				line-height: 35rpx;
				word-wrap: break-word;
				word-break: break-all;
				.comment-target {
					color: #787878;
					font-size: 24rpx;
					line-height: 35rpx;
					margin-right: 5rpx;
					font-style: italic;
					padding-right: 2rpx;
					color: $theme-main-color;
					&::before {
						content: '@';
						font-style: normal;
					}
				}
			}
		}

		.comment-bottom {
			height: 30rpx;
			display: flex;
			justify-content: flex-end;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: rgba(204, 204, 204, 1);
			.comment-bottom-item {
				margin-left: 40rpx;
			}
		}
	}
}
</style>
